<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.6.3.min.js"></script>
		<script>
			$(function(){
				//
				$("#mobile").blur(function(){
					var reg=/^\d{7,11}$/g;
					$phone=$(this); 
					if(!reg.test($phone.val())){
						$phone.next().text("手机号输入错误！");
						return false;
					}else{
						$phone.next().text("√");
						return true;
					}
				});
				
				$(":text[name=yanzhengma]").blur(function(){
					let yanz=$(this);
					if(yanz.val().length!=6){
						yanz.next().text("验证码必须填写6位！").css("color","red");
						return false;
					}else{
						yanz.next().text("√").css("color","green");
						return  true;
					}
				});
				
				$(":password[name=pass]").blur(function(){
					let pass=$(this);
					if(pass.val().length>=8&&pass.val().length<=30){ 
						pass.next().text("√");
						return true;
					}else{//没有做复杂性验证
						pass.next().text("密码长度必须在8-30之间！");
						return false;
					}
				});
				
				//电子邮件多选框加点击事件
				$("#accpetEmail").click(function(){
					console.log($(this).is(":checked"));
					
					if($(this).is(":checked")){
						console.log($(this).nextAll("div"));
						$(this).next().show(50).find("input").removeAttr("disabled");
					}else{
						$(this).next().hide(50).find("input").attr("disabled",true);
					}
				});
				
				$("#form").submit(function(){
					//采用触发的方式，触发每一个元素的blur事件
					let f1= $("#mobile").triggerHandler("blur");
					let f2=$(":password[name=pass]").triggerHandler("blur");
					let f3=$(":text[name=yanzhengma]").triggerHandler("blur");
					let f= f1&&f2&&f3; 
					//勾选电子邮件
					
					 //
					return f;
					//验证,采用正则的方式
					// var reg=/^\d{7,11}$/g;
					// $phone=$("#mobile"); 
					// if(!reg.test($phone.val())){
					// 	$phone.next().text("手机号输入错误！");
					// }else{
					// 	$phone.next().text("√");
					// }
					
					// let yanz=$(":text[name=yanzhengma]");
					// if(yanz.val().length!=6){
					// 	yanz.next().text("验证码必须填写6位！");
					// }else{
					// 	yanz.next().text("√");
					// }
					
					// return false;
				});
			});
		</script>
	</head>
	<body>
		<h2>手机中注册</h2>
		<form action="2.html" id="form">
			<p>
				<input type="text" id="mobile" name="mobile" autocomplete="off" placeholder="请输入您的常用手机号" param="请输入您的常用手机号" class="reg-input" id="mobile" maxlength="11" /><span ></span>
			</p>
			<p>
				<input type="text" name="yanzhengma" maxlength="6" placeholder="6位验证码" /><span ></span>
			</p>
			<p>
				<input type="password" name="pass" maxlength="30" placeholder="密码长度是8-30" /><span ></span>
			</p>
			<div>
				是否愿意接收我们的电子邮件:<input type="checkbox" id="accpetEmail" name="accpetEmail" value="on"/>
				<div style="display:none;">
					你的邮件地址:<input type="email" disabled required placeholder="常用邮件地址"/><span></span>
				</div>
			</div>
			<p>
				<input type="submit" value="注册"/>
			</p>
		</form>
	</body>
</html>